<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../libs/mui/mui.css"/>
		<link rel="stylesheet" href="../css/mui.min.css"/>
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<style>
			/*轮播图*/	
			.mui-bar-nav{box-shadow: none;}
			.mui-slider .mui-slider-group .mui-slider-item img{height: 200px;overflow: hidden;}
			.mui-slider-indicator{text-align: right;width: 95%;}
			.mui-slider-indicator .mui-indicator{width: 10px;height: 10px;margin: 1px 2px;box-shadow: none;background: #e7e7e7;}
			.mui-slider-indicator .mui-active.mui-indicator {background: #338efc; box-shadow:none;}			
			/*详情*/
			.prize .mui-table-view:after,.prize .mui-table-view:before{height: 0;}			
			.prize .mui-table-view:nth-child(2) .mui-table-view-cell p{margin-top: 4px;}
			.mui-card-content-inner button{padding: 0px 3px;font-size: 12px;border: none;}			
			/*蓝*/.mui-btn-primary{background: #34b0f1;padding: 0px 3px;font-size: 12px;border: none;}
			/*绿*/.mui-btn-success{background: #2cd2b8;padding: 0px 3px;font-size: 12px;border: none;}
			.detail p{padding: 5px 0;}
			.detail .mui-table-view:nth-child(2):after{height: 0;}					
			/*底部*/
			.mui-bar-tab .mui-tab-item.mui-active{color: #e3393c !important;}			
			.mui-bar-tab div a:nth-child(1){display: block;text-align: center;line-height: 30px;height: 50px;background: white;border-right: 1px solid #DDDDDD}
			.mui-bar-tab div a:nth-child(1) h5{margin: 0;}
			.mui-bar-tab div:nth-child(2){background: white;color: #2875f5;line-height: 30px;}
			.mui-bar-tab div:nth-child(3) span{background: #2875f5;color: white;line-height: 30px;}
			.wid30{font-size: 17px;width: 100%;display: inline-block;padding: 12px 0;text-align: center;height: 50px;}							
		  	/*商品*/		  	
			.mui-table-view.mui-grid-view .mui-table-view-cell {width: 100%;text-align: left;padding: 11px 15px;}
			.detal{width: 100%;padding: 11px 0px;background: white;overflow: hidden;}
			.detal img{margin-bottom: -5px;}
			.detal h5{color: black;font-size: 16px;padding: 0px 15px;}
			.shop{display: block;font-size: 14px;color: #AAAAAA;padding: 13px 15px;}
			.shop span{width: 50%;float: left;display: block;}
			/*弹窗*/
			.alert{ display:none;position: fixed;right: 0;left: 0; bottom: 0;height: 420px;z-index: 1000; }
			.alert-box{background-color: #ffffff !important;}
			.alert-box{ position:absolute; bottom: 0 !important; right: 0;left: 0; z-index: 10000;padding-top:5em; height: 390px;}
			.alert img{height: 95px; max-width: 95px; line-height: 95px; position: absolute; top:13px; left:15px;z-index: 99999;border: 3px solid #ffffff;border-radius: 4px;}
			.alert .text{position: absolute;left: 120px;top: 40px;z-index: 99999;}
			.alert .text p{margin: 0; padding: 0; color: black;}
			.chose>button{background-color: #cbcbcb; border: none; color: #ffffff;margin-right: 5px;}			
			.colo>button{background-color: #cbcbcb; border: none; color: #ffffff;margin-right: 5px;}
			.back-orange {background: #34b0f1 !important;}
			.mui-numbox{width: 150px;}
			.sure1.mui-btn,.sure2.mui-btn{background-color: #34b0f1; border: none;color: #ffffff; padding:9px 12px !important; margin: 0;display: none;}	
		  	.alert-back{position: fixed;z-index: 998;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.5);display:none;}		  						
	</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
			<a href="#picture" class="mui-pull-right mui-icon">
		    	<i class="iconfont Siez1">&#xe612;</i>
		    </a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<div class="mui-col-xs-3 mui-pull-left">
				<a class="tel">
					<i class="iconfont Siez2">&#xe611;</i>
					<h5>商家</h5>
				</a>
			</div>
			<div class="mui-col-xs-4 mui-pull-left">
				<span class="wid30 shoucang gouwu">加入购物车</span>
			</div>
			<div  class="mui-col-xs-5 mui-pull-left">
				<a class="goumai">
					<span class="wid30">立即购买</span>
				</a>
			</div>
		</nav>	
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../public/img/lun2.jpg">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../public/img/lun2.jpg">
						</a>
					</div>					
					<div class="mui-slider-item">
						<a href="#">
							<img src="../public/img/41.jpg">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../public/img/32.jpg">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../public/img/35.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../public/img/lun2.jpg">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div class="prize">					
				<ul class="mui-table-view" >
					<li class="mui-table-view-cell">						
						<div class="mui-ellipsis-2">
							<button type="button" class="mui-btn mui-btn-primary">定制</button>
							新款汉服女装 曲裾[眉妩(廿七]粉色刺绣花 曲裾
						</div>
					</li>
				</ul>
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell">
						<b class="red">￥2500.00</b>
						<span class="mui-pull-right mui-h5">销量：2536</span>
					</li>					
				</ul>
			</div>	
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" onclick="openNewPage('goods_evaluation.html')">
					<a class="mui-navigate-right">
						<span>评价(500)</span>
					</a>
				</li>					
			</ul>
			<div class="detal">
				<h5>商品详情</h5>
				<div class="shop">
					<span>品牌：如梦霓裳</span>
					<span>尺码：S,M,L</span>					
				</div>
				<div class="shop">
					<span>颜色分类：曲剧,腰带</span>
					<span>上市时间：2016年秋季</span>
				</div>				
				<img src="../public/img/40.jpg"/>
				<img src="../public/img/41.jpg"/>
				<img src="../public/img/lun2.jpg"/>
			</div>			
		</div>	
		<div class="alert">
			<div>
				<img class="mui-media-object mui-pull-left" src="../public/img/lun2.jpg">
				<div class="text">
					<b class="red">￥25.00</b>
					<p>库存：<span>457974</span></p>
					<p>已选：<span>S,红色</span></p>
				</div>
			</div>
			<div class="alert-box">
				<div class="mui-table-view">
					<div class="mui-table-view-cell">
						<div>
							<span>尺码</span>
							<p class="chose m5">
								<button type="button" class="mui-btn back-orange">S</button>
								<button type="button" class="mui-btn mlr">M</button>
								<button type="button" class="mui-btn mlr">L</button>
							</p>
						</div>
						<div class="m1">
							<span>颜色</span>
							<p class="colo m5">
								<button type="button" class="mui-btn back-orange">红色</button>
								<button type="button" class="mui-btn mlr">粉色</button>
							</p>
						</div>
					</div>	
				</div>
				<div class="mui-table-view">
					<div class="mui-table-view-cell mui-text-right">
						<span class="mui-pull-left" style="padding-top: 8px">购买数量</span>
						<div class="mui-numbox" data-numbox-min='1'>
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input class="mui-input-numbox" type="number" />
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
					</div>
				</div>
				<div style="background-color: #ffffff;height: 50px;"></div>
				<div>
					<button class="mui-btn mui-btn-block sure1">
						确定
					</button>	
					<button class="mui-btn mui-btn-block sure2">
						确定
					</button>
				</div>
			</div>
		</div>
		<!--分享-->
		<div id="picture" class="brand-share mui-popover mui-popover-action mui-popover-bottom" style="height: 100px;">
			<ul class="background table-view">
				<li><i class="iconfont lvs">&#xe609;</i>
					<span>微信</span>
				</li>
				<li><i class="iconfont ify4">&#xe658;</i>
					<span>QQ好友</span>
				</li>
				<li><i class="iconfont lvs">&#xe65f;</i>
					<span>朋友圈</span>
				</li>
				<li><i class="iconfont ify3">&#xe661;</i>
					<span>微博</span>
				</li>
			</ul>		
		</div>
		<div class="alert-back"></div>
		<script src="../js/mui.js"></script>
		<script src="../js/open.js"></script>
		<script src="../libs/jquery/jquery.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			//nav自动时间控制
			gallery = mui('#slider');
				gallery.slider({
					interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
			});			
			$(".gouwu").on("tap",function(){
				$(".alert-back").toggle();
				$(".alert").slideToggle();
				$('.sure2').css("display",'none')
				$(".sure1").css('display','block');
			})
//			立即购买
			$(".goumai").on("tap",function(){
				openNewPage('goods.html')
			})
//			客服商家
			$(".tel").on("tap",function(){
				openNewPage('Chat.html')
			})			
			$(".sure1").on("click",function(){
				$(".alert").slideToggle();
				$(".alert-back").toggle();
				mui.toast('已加入购物车！');
			})	
//			$(".sure2").on("click",function(){
//					$(".alert").slideToggle();
//					$(".alert-back").toggle();
//					openNewPage('goods.html')
//			})
			$(".chose>button").each(function(i){
	            var $this = $(this);
	            $this.on('tap',function(){
	                $(".chose>button").removeClass('back-orange');
	                $this.addClass('back-orange');
	            });
	        });
	       $(".colo>button").each(function(i){
	            var $this = $(this);
	            $this.on('tap',function(){
	                $(".colo>button").removeClass('back-orange');
	                $this.addClass('back-orange');
	            });
	        });
		</script>
	</body>
</html>